import { defineComponent } from "vue";

const SunnyIcon = defineComponent({
  props: {
    sizeClass: String
  },
  setup(props) {
    return () => (
      <svg
        class={`${props.sizeClass} text-yellow-500`}
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          fill-rule="evenodd"
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          clip-rule="evenodd"
        />
      </svg>
    );
  }
});

const CloudyIcon = defineComponent({
  props: {
    sizeClass: String
  },
  setup(props) {
    return () => (
      <svg
        class={`${props.sizeClass} text-gray-500`}
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
      </svg>
    );
  }
});

const RainyIcon = defineComponent({
  props: {
    sizeClass: String
  },
  setup(props) {
    return () => (
      <svg
        class={`${props.sizeClass} text-blue-500`}
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          fill-rule="evenodd"
          d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
          clip-rule="evenodd"
        />
      </svg>
    );
  }
});

const DefaultIcon = defineComponent({
  props: {
    sizeClass: String
  },
  setup(props) {
    return () => (
      <svg
        class={`${props.sizeClass} text-gray-400`}
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
          clip-rule="evenodd"
        />
      </svg>
    );
  }
});

// 添加天气图标组件
export default defineComponent({
  props: {
    type: String,
    size: {
      type: String,
      default: "md",
    },
  },
  setup(props) {
    const getIcon = () => {
      const type = props.type?.toLowerCase() || "";
      const sizeClass =
        props.size === "lg"
          ? "w-16 h-16"
          : props.size === "sm"
          ? "w-6 h-6"
          : "w-8 h-8";

      // 根据天气类型返回不同图标
      if (type.includes("晴")) {
        return <SunnyIcon sizeClass={sizeClass} />;
      } else if (type.includes("云")) {
        return <CloudyIcon sizeClass={sizeClass} />;
      } else if (type.includes("雨")) {
        return <RainyIcon sizeClass={sizeClass} />;
      } else {
        return <DefaultIcon sizeClass={sizeClass} />;
      }
    };

    return () => (
      <div class="flex items-center justify-center">{getIcon()}</div>
    );
  },
});